/* eslint-disable lines-between-class-members */
import React, { Component } from 'react';
import { connect } from 'dva';
import { Card, Divider, Button, Row, Col, message, Popconfirm} from 'antd';
import DescriptionList from '@/components/DescriptionList';
import PageHeaderWrapper from '@/components/PageHeaderWrapper';
import moment from 'moment';
import styles from './Orderdetails.less';

const { Description } = DescriptionList;


@connect(({ profile,cancelorder, order, orderdetails, loading }) => ({
  profile,
  order,
  cancelorder,
  orderdetails: orderdetails.data,
  room: orderdetails.data.room,
  loading: loading.effects['profile/fetchBasic'],
}))
class Orderdetails extends Component {
  constructor(props) {
    super(props);
    this.state = {
      detailData: {}
    }
  }
  componentDidMount() {
    const { match } = this.props;
    const { params } = match;
    const { dispatch } = this.props;
    // eslint-disable-next-line no-unused-vars

    const paramsAll = {
      id: params.id,
    };
    dispatch({
      type: 'orderdetails/orderdetails1',
      payload: paramsAll,
      callback: response => {
        if (response.success === true) {
          this.state.detailData = response.result
          const root = this;
          if(!this.state.detailData.isConfirm && this.state.detailData.orderStatus === 15){
            root.setState({
              disabled: "",
             })
          }else{
            root.setState({
              disabled: "disabled",
             })
          }
          if(this.state.detailData.orderStatus>=30){
          
           root.setState({
            disableds: "disabled",
           })
          }else{
            root.setState({
              disableds: "",
             })
           
          }
          if(this.state.detailData.room.roomPictures[0]){
            this.setState({
              pictureUrl:this.state.detailData.room.roomPictures[0].pictureUrl
              
            })
          }
        }
      }
    });
  }
  handleverify = (data) => {
    const { dispatch } = this.props;
    const paramsAll = {
      id: data.id,
    };
    dispatch({
      type: 'order/order1',
      payload: paramsAll,
      callback: response => {
        if (response.success === true) {
            message.success("操作成功");
            dispatch({
              type: 'orderdetails/orderdetails1',
              payload: paramsAll,
              callback: response => {
                if (response.success === true) {
                  this.state.detailData = response.result
                  const root = this;
                  if(!this.state.detailData.isConfirm && this.state.detailData.orderStatus === 15){
                    root.setState({
                      disabled: "",
                     })
                  }else{
                    root.setState({
                      disabled: "disabled",
                     })
                  }
                  if(this.state.detailData.orderStatus>=30){
                  
                   root.setState({
                    disableds: "disabled",
                   })
                  }else{
                    root.setState({
                      disableds: "",
                     })
                   
                  }
                }
              }
            });
          }else{
  
          }
        
      }
    });

  };
  handlecancel = (data) => {
    const { dispatch } = this.props;
    const paramsAll = {
      id: data.id,
    };
    dispatch({
      type: 'cancelorder/cancelorder1',
      payload: paramsAll,
      callback: response => {
        if (response.success === true) {
          message.success("操作成功");
          dispatch({
            type: 'orderdetails/orderdetails1',
            payload: paramsAll,
            callback: response => {
              if (response.success === true) {
                this.state.detailData = response.result
                const root = this;
                if(!this.state.detailData.isConfirm && this.state.detailData.orderStatus === 15){
                  root.setState({
                    disabled: "",
                   })
                }else{
                  root.setState({
                    disabled: "disabled",
                   })
                }
                if(this.state.detailData.orderStatus>=30){
                
                 root.setState({
                  disableds: "disabled",
                 })
                }else{
                  root.setState({
                    disableds: "",
                   })
                 
                }
              }
            }
          });
        }else{

        }
      }
    });
  };
  render() {
    const { match: { params = {} } } = this.props;
    const { orderdetails = {}, room = {roomPictures:[]}, loading } = this.props;
 
    return (
      <PageHeaderWrapper title="订单详情页" loading={loading}>
        <Card bordered={false}>
          <DescriptionList size="large" title="订单信息" col="4" style={{ marginBottom: 32 }}>
            <Description term="订单号">{orderdetails.orderNo}</Description>
            <Description term="预订时间">{moment(orderdetails.createTime).format('YYYY-MM-DD')}</Description>
            <Description term="订单总价">{orderdetails.totalPrice}</Description>
            <Description term="订单状态">{orderdetails.orderStatus === 0 ? "待确认" : (orderdetails.orderStatus === 5 ? "待支付" : (orderdetails.orderStatus === 15 ? "已付款" : (orderdetails.orderStatus === 20 ? "待入住" : (orderdetails.orderStatus === 30 ? "已入住" : (orderdetails.orderStatus === 40 ? "已完成" : "已取消")))))}</Description>
          </DescriptionList>
          <Divider style={{ marginBottom: 32 }} />
          <DescriptionList size="large" title="用户信息" style={{ marginBottom: 32 }}>
            <Description term={
              <img alt="" className={styles.orderdetailsAvatar} src={orderdetails.avatarUrl} />
            }
            />
            <Description term="姓名">{orderdetails.name}</Description>
            <Description term="联系电话">{orderdetails.phone}</Description>
            <Description term="E-mail">{orderdetails.email}</Description>
            <Description term="微信昵称">{orderdetails.nickName}</Description>
          </DescriptionList>
          <Divider style={{ marginBottom: 32 }} />
          <DescriptionList size="large" title="订房信息"  col="2" style={{ marginBottom: 32 }}>

            <Description  term={
              <img alt="" className={styles.orderdetailsimg} src={this.state.pictureUrl} />
            }
            />
            <Description term="预订房型">{room.name}</Description>
            <Description term="入住时段">{moment(orderdetails.checkInTime).format('YYYY-MM-DD')}~{moment(orderdetails.checkOutTime).format('YYYY-MM-DD')}</Description>
            <Description term="房型单价">{room.defaultPrice}</Description>
          </DescriptionList>
          <Divider style={{ marginBottom: 32 }} />

          <div className="gutter-example">
            <Row gutter={16}>
              <Col className="gutter-row" span={6}>
                <div className="gutter-box" />
              </Col>
              <Col className="gutter-row" span={6} >
                <div className="gutter-box">
                  <Button disabled={this.state.disabled} type="primary" onClick={() => this.handleverify(orderdetails)}>
                    确认
                  </Button>
                </div>
                {/* <Popconfirm
                  key="2"
                  title="是否确认信息?"
                  okText="确定"
                  cancelText="取消"
                  onConfirm={() => this.handleverify(orderdetails)}
                  disabled={this.state.disabled}
                >
                  <Button type="primary" disabled={this.state.disabled}>确认</Button>
                </Popconfirm> */}
              </Col>
              <Col className="gutter-row" span={6}>
                <div className="gutter-box" >
                  <Button disabled={this.state.disableds} onClick={() => this.handlecancel(orderdetails)}  >
                    取消/退款
                  </Button>
                </div>
                {/* <Popconfirm
                  title="确定删除吗?"
                  okText="确定"
                  cancelText="取消"
                  onConfirm={() => this.handlecancel(orderdetails)}
                  disabled={this.state.disableds}
                >
                  <Button disabled={this.state.disableds}>
                    取消/退款
                  </Button>
                </Popconfirm> */}
              </Col>
              <Col className="gutter-row" span={6}>
                <div className="gutter-box" />
              </Col>
            </Row>
          </div>
        </Card>
      </PageHeaderWrapper>
    );
  }
}

export default Orderdetails;
